<template>
    <div class="newsList">
        <div class="start"></div>
        <div class="skewCard">
            <div class="big">
                <div class="bigMain">
                    <div class="bigTitle">
                        <h2>{{showData.title}}</h2>
                        <span>发布时间： {{showData.tagTime}}</span>
                        <span>浏览次数： {{showData.tagNum}}</span>
                    </div>
                    <div class="bigText">
                        <p>{{showData.textTwo}}</p>
                    </div>
                </div>
            </div>
                <div class="littleNav">
                    <div class="shangNav" @click="Jump(1)">
                        <p>{{fontNav}}</p>
                    </div>
                    <div class="xiaNav" @click="Jump(0)">
                        <p>{{afterNav}}</p>
                    </div>
                </div>
                <div class="consoleNav" @click="returNav">返回列表</div>
        </div>
    </div>
</template>

<script>
    import cont from "../../util/cont";
    export default {
        name: "newsList",
         created() {
            // var that=this;
             var id=parseInt(this.$route.params["id"]);
             this.newsId=id;
             this.showCard(id);
        },
        data(){
            return{
                finallyTransfData:cont,
                showData:{},
                newsId:0,
                fontNav:'',
                afterNav:''
            }
        },
        methods:{
            showCard(id){
                this.showData=this.finallyTransfData[id];
                if(id===0){
                    this.fontNav='前面没有了';
                    this.afterNav=this.finallyTransfData[id+1].title;
                }else if(id===this.finallyTransfData.length-1){
                    this.fontNav=this.finallyTransfData[id-1].title;
                    this.afterNav='后面没有了';
                }else {
                    this.fontNav=this.finallyTransfData[id-1].title;
                    this.afterNav=this.finallyTransfData[id+1].title;
                }
                // console.log(this.showData);
            },
            returNav(){
                this.$router.push('/news/1');
            },
            Jump(num){
                if (num===1 && this.newsId!==0){
                    this.newsId=this.newsId-1;
                    this.showData=this.finallyTransfData[this.newsId];
                    this.showCard(this.newsId);

                }else if(num===0 && this.newsId!==this.finallyTransfData.length-1) {
                    this.newsId=this.newsId+1;
                    this.showData=this.finallyTransfData[this.newsId];
                    this.showCard(this.newsId);

                }
            }

        }


    }
</script>

<style lang="less" scoped>
.newsList{
    width: 100%;
    box-sizing: border-box;
    min-width: 1300px;
    .start{
        height: 400px;
        background: url("../../assets/about/about.jpg");
        background-size: 100% 100%;
    }
    .skewCard{
        padding: 0 150px;
        overflow: auto;
        height: 700px;
        box-sizing: border-box;
        .big{
            width: 900px;
            height: 700px;
            transform: skewY(-3deg);
            box-shadow: 0 0 15px #aaaaaa;
            position: absolute;
            box-sizing: border-box;
            padding: 50px 30px;
            left: 200px;
            top: 330px;
            z-index: 9;
            background: white;
            .bigMain{
                transform: skewY(3deg);
                .bigTitle{
                    box-sizing: border-box;
                    padding: 30px 0;
                    border-bottom: 1px solid #cccccc;
                }
                span{
                    font-size: 15px;
                    color: #aaaaaa;
                    margin-left: 20px;
                }
                .bigText{
                    height: 350px;
                    border-bottom: 1px solid #cccccc;
                    p{
                        text-indent: 2em;
                        line-height: 45px;
                        color: #666;
                    }
                }
            }
        }
        .littleNav{
            height: 300px;
            width: 300px;
            transform: skewY(-3deg);
            background: linear-gradient(to right,#285BCD,#4BE556);
            position: absolute;
            left: 1100px;
            top: 400px;
            z-index: 9;
            box-sizing: border-box;
            padding: 20px;
            .shangNav{
                height: 130px;
                width: 250px;
                color: white;
                border-bottom: 2px solid white;
                cursor: pointer;
                p{
                    font-size: 15px;
                }
            }
            .xiaNav{
                height: 130px;
                color: white;
                cursor: pointer;
                width: 250px;
                border-top: 1px solid white;
                p{
                    font-size: 15px;
                }
            }
        }
        .consoleNav{
            width: 300px;
            height: 70px;
            text-align: center;
            line-height: 70px;
            font-size: 20px;
            cursor: pointer;
            color: white;
            font-weight: 600;
            transform: skewY(-3deg);
            position: absolute;
            left: 1100px;
            top: 700px;
            background: #DDDDDD;
            z-index: 9;
        }
    }
}
</style>
